<template>
  <page-header title="粉丝社群" background="#DCDFCE" />
  <image class="img" :src="addDomain('/static/code.jpg')"></image>
  <view class="content">
    <image v-if="seq == 0" class="code" @tap="preview(0)" :src="imgArray[0]" mode="aspectFill"></image>
    <image v-if="seq == 1" class="code" @tap="preview(1)" :src="imgArray[1]" mode="aspectFill"></image>
    <image v-if="seq == 2" class="code" @tap="preview(2)" :src="imgArray[2]" mode="aspectFill"></image>
    <view class="button">扫描二维码进入群聊</view>
    <view class="swiper">
      <view :class="{swiperItem:true,active:seq == 0}" @click="changeSeq(0)">
        <image src="../../static/img/11.png"></image>
      </view>
      <view :class="{swiperItem:true,active:seq == 1}" @click="changeSeq(1)">
        <image src="../../static/img/22.png"></image>
      </view>
      <view :class="{swiperItem:true,active:seq == 2}" @click="changeSeq(2)">
        <image src="../../static/img/33.png"></image>
      </view>
    </view>
  </view>

</template>

<script setup>
  import {
    ref
  } from 'vue';
  const Data = ref([])
  const imgArray = ref([])
  const seq = ref(0)
  onLoad(() => {
    getCode()
  })
  /**
   * 轮播图
   */
  const getCode = () => {
    uni.showLoading()
    http.request({
      url: '/mall4cloud_point/ua/listIndexImg?type=2',
      method: 'GET'
    }).then((res) => {
      uni.hideLoading()
      Data.value = res
      imgArray.value = Data.value.map(item => {
        return item.imgUrl
      })
    })
  }
  /**
   * 预览图片
   */
  const preview = (index) => {
    uni.previewImage({
      urls: imgArray.value,
      current: index
    })
  }
  const changeSeq = (index) => {
    seq.value = index;
  }
  // 添加图片域名
  const addDomain = (path) => {
      const resourcesUrl = import.meta.env.VITE_APP_FILE_URL
    if (!path || /^http?:\/\//.test(path)) {
      return path
    } else {
      return resourcesUrl + path
    }
  }
</script>

<style lang="scss" scoped>
  .img {
    width: 100%;
    height: 1400rpx;
    position: absolute;
  }

  .content {
    position: absolute;
    top: 490rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .button {
    padding: 5rpx 30rpx;
    height: 50rpx;
    background: linear-gradient(90deg, #F0CCA0 30%, #B7533D);
    color: white;
    line-height: 50rpx;
    text-align: center;
    border-radius: 30rpx;
    font-weight: bold;
    letter-spacing: 5px;
    width: 320rpx;
    margin-top: 45rpx;
  }

  .swiper {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 30rpx;
  }

  .swiperItem {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin: 20px;
  }

  .swiperItem.active {
    box-shadow: 1px 5px 12px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
  }

  .code {
    width: 400rpx;
    height: 400rpx;
    margin: auto;
    /* 可选：垂直居中 */
  }
</style>
